<template>
    <view class="layout">
        <view class="navbar">
            <view class="statusBar" v-bind:style="{height:getStatusBarHeight()+'px'}"></view>
            <view class="titleBar" v-bind:style="{height:getTitleBarHeight()+'px',marginLeft:getLeftIconLeft()+'px'}">
                <view class="icon">
                    <uni-icons type="back" color="#fff"></uni-icons>
                </view>
            </view>
        </view>
        <view class="fill" v-bind:style="{height:getNavBarHeight()+'px'}"></view>
    </view>
</template>

<script>
    import Vue from 'vue';
    import {
        getStatusBarHeight,
        getTitleBarHeight,
        getNavBarHeight,
        getLeftIconLeft
    } from "@/utils/system.js";

    export default {
        data() {
            return {};
        },
        methods: {}
    };
</script>

<style lang="scss" scoped>
 .layout {
     .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            background:
                linear-gradient(to bottom, transparent, #fff 600rpx),
                linear-gradient(to right, #fe0c28 10%, #F4E258);

          .statusBar {}

          .icon {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                margin-left: 20rpx;
            }

          .titleBar {
                display: flex;
                align-items: center;
                height: 30rpx;

              .score {
                    align-items: center;
                    display: flex;
                    flex-direction: row;
                    background-color: rgba(0, 0, 0, 0.5);
                    font-size: 22px;
                    font-weight: 700;
                    color: black;
                    margin-left: 30rpx;
                    padding: 5rpx 10rpx;
                    border-radius: 45rpx;

                  .coin {
                        height: 50rpx;
                        width: 50rpx;
                    }

                  .add {
                        height: 30rpx;
                        width: 30rpx;
                    }

                  .text {
                        color: white;
                        margin-left: 20rpx;
                        margin-right: 20rpx;
                    }
                }
            }
        }

      .fill {}
    }
</style>